<template>
  <div class="rightSide">
    <div v-if="!isLoading" class="prop-btns">
      <div class="prop-btn" @touchstart="() => clickUseProp('shield')">
        <div class="prop-number">{{ propNum.shield }}</div>
        <div class="btn-icon"></div>
        <div class="prop-name">护盾</div>
        <div v-show="isUseProp" class="prop-time">
          <div class="prop-time-mask"></div>
          <div class="prop-time-mask prop-time-mask-2" :style="maskStyle"></div>
          <div class="prop-time-num">{{parseFloat(propDuration / 1000)}}s</div>
        </div>
        
      </div>
      <div class="prop-btn" @touchstart="() => clickUseProp('experience')">
        <div class="prop-number">{{ propNum.experience }}</div>
        <div class="btn-icon"></div>
        <div class="prop-name">双倍经验</div>
        <div v-show="isUseProp" class="prop-time">
          <div class="prop-time-mask"></div>
          <div class="prop-time-mask prop-time-mask-2" :style="maskStyle"></div>
          <div class="prop-time-num">{{parseFloat(propDuration / 1000)}}s</div>
        </div>
      </div>
      <div class="prop-btn" @touchstart="() => clickUseProp('speed')">
        <div class="prop-number">{{ propNum.speed }}</div>
        <div class="btn-icon"></div>
        <div class="prop-name">加速</div>
        <div v-show="isUseProp" class="prop-time">
          <div class="prop-time-mask"></div>
          <div class="prop-time-mask prop-time-mask-2" :style="maskStyle"></div>
          <div class="prop-time-num">{{parseFloat(propDuration / 1000)}}s</div>
        </div>
      </div>
      <div class="prop-btn" @touchstart="() => clickUseProp('addLength')">
        <div class="prop-number">{{ propNum.addLength }}</div>
        <div class="btn-icon"></div>
        <div class="prop-name">加长</div>
        <div v-show="isUseProp" class="prop-time">
          <div class="prop-time-mask"></div>
          <div class="prop-time-mask prop-time-mask-2" :style="maskStyle"></div>
          <div class="prop-time-num">{{parseFloat(propDuration / 1000)}}s</div>
        </div>
      </div>
    </div>
    <div id="velocityHandler" class="buttonWrapper right-buttonWrapper lightning"
      :style="lightningStyle"
      @touchstart="handleTouchStart"
      @touchend="handleTouchEnd"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'VSnakeRightOptionsBtn',
  props: {
    isLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      lightningStyle: {},
      maskStyle: {
        height: 0
      },
      propDuration: 10 * 1000,
      isUseProp: false,
      propTimer: null,
      propNum: {
        shield: 12,
        experience: 0,
        speed: 20,
        addLength: 20
      }
    };
  },

  mounted() {
    
  },

  methods: {
    handleTouchStart() {
      this.lightningStyle = { backgroundColor: 'rgba(0, 0, 0, 0.4)' }; // 触摸开始时改变样式
    },
    handleTouchEnd() {
      this.lightningStyle = { backgroundColor: 'rgba(0, 0, 0, 0.3)' }; // 触摸结束时改变样式
    },
    clickUseProp(type) {
      if(this.propTimer) {
        return
      }
      if(!this.propNum[type]) {
        return this.$toast('没有该道具啦')
      }
      this.propNum[type]--
      let heightNumber = 0
      this.isUseProp = true
      this.$emit('useProp', type)
      this.propTimer = setInterval(() => {
        this.propDuration -= 100
        this.maskStyle.height = `${heightNumber++}%`
        if(this.propDuration <= 0) {
          this.propDuration = 10 * 1000
          this.maskStyle.height = 0
          this.isUseProp = false
          clearInterval(this.propTimer)
          this.propTimer = null
        }
      }, 100)
    }
  },
};
</script>

<style lang="scss">
.rightSide{
  position: absolute;
  width: 15rem;
  height: 100%;
  right: 0;
  background: transparent;
  top: 0;
  z-index: 99;
  .right-buttonWrapper{
    right: 2rem;
    left: auto ;
  }
  .lightning {
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url("@/assets/scss/lightning.png");
    background-size: auto 50px;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: rgba(0, 0, 0, 0.2) 0px -3px 3px inset
  }
  .prop-btns {
    position: absolute;
    bottom: 2rem;
    height: 15rem;
    width: 15rem;
  }
  .prop-btn {
    width: 3.2rem;
    height: 3.2rem;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    
    &:nth-child(1) { left: 2.5rem; bottom: 0.5rem; }
    &:nth-child(2) { left: 3rem; bottom: 4.5rem; }
    &:nth-child(3) { left: 6rem; bottom: 7rem; }
    &:nth-child(4) { left: 10rem; bottom: 7.5rem;}
    .btn-icon {
      position: absolute;
      width: 50%;
      height: 50%;
      background-color: #ffffff;
      border-radius: 50%;
      left: 25%;
      top: 25%;
    }
    .prop-number {
      position: absolute;
      top: -.3rem;
      right: 0rem;
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      background-color: #ffffff;
      text-align: center;
      line-height: 1.2rem;
      z-index: 11;
    }
    .prop-name {
      position: absolute;
      width: 100%;
      bottom: -0.3rem;
      text-align: center;
      font-size: 0.75rem;
      text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff,0 0 2px #ffffff;
      z-index: 11;
    }
    .prop-time-mask {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0,.5);
      border-radius: 50%;
      z-index: 8;
    }
    .prop-time-mask-2 {
      height: 0;
      background-color: rgba(255, 255, 255,.8);
      border-radius: 0%;
      z-index: 9;
    }
    .prop-time {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      text-align: center;
      line-height: 3.2rem;
      overflow: hidden;
    }
    .prop-time-num {
      position: absolute;
      z-index: 10;
      width: 100%;
    }
  }
}
</style>